<template>
  <div class="goods-list-container">
    <div class="subcategory-nav">
      <van-tabs 
        v-model:active="activeSubCategory" 
        swipeable 
        @click-tab="handleSubCategoryChange"
      >
        <van-tab 
          v-for="sub in subCategoryList" 
          :key="sub.id" 
          :title="sub.name" 
          :name="sub.id" 
        />
      </van-tabs>
    </div>

    <div class="current-category" v-if="currentCategory">
      <img :src="currentCategory.picUrl" class="category-banner" />
      <div class="category-info">
        <h3>{{ currentCategory.name }}</h3>
        <p>{{ currentCategory.desc || '暂无描述' }}</p>
      </div>
    </div>

    <van-list 
      v-model:loading="loading" 
      :finished="finished" 
      finished-text="没有更多了" 
      @load="loadMoreGoods"
    >
      <div class="goods-list">
        <div 
          class="goods-item" 
          v-for="item in goodsList" 
          :key="item.id" 
          @click="goToGoodsDetail(item.id)"
        >
          <img :src="item.picUrl" class="goods-image" />
          <div class="goods-info">
            <div class="goods-name">{{ item.name }}</div>
            <div class="goods-price">
              <span class="retail-price">¥{{ item.retailPrice }}</span>
              <span class="counter-price" v-if="item.counterPrice">¥{{ item.counterPrice }}</span>
            </div>
            <div class="goods-brief">{{ item.brief || '暂无简介' }}</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCategory, getGoodsList } from '@/api/goods'

const route = useRoute()
const router = useRouter()

// 响应式数据
const categoryData = ref(null)
const goodsList = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const limit = 10

// 从路由参数获取初始分类ID，如果没有则默认为空
const activeSubCategory = ref(route.query.id || '')

// 计算属性
const currentCategory = computed(() => categoryData.value?.data?.currentCategory)
const subCategoryList = computed(() => categoryData.value?.data?.brotherCategory || [])


// 获取分类数据
const fetchCategoryData = async (id) => {
  const res = await getCategory(id)
  if (res.errno === 0) {
    categoryData.value = res
    // 如果没有激活的子分类且子分类列表不为空，则默认选择第一个子分类
    if (!activeSubCategory.value && subCategoryList.value.length > 0) {
      activeSubCategory.value = subCategoryList.value[0].id
    }
    fetchGoodsList()
  }
}

// 获取商品列表
const fetchGoodsList = async () => {
  if (!activeSubCategory.value) return

  loading.value = true
  const res = await getGoodsList({
    categoryId: activeSubCategory.value,
    page: page.value,
    limit
  })

  if (res.errno === 0) {
    goodsList.value = page.value === 1 
      ? res.data.list || [] 
      : [...goodsList.value, ...res.data.list]
    
    finished.value = res.data.list.length < limit
  }
  loading.value = false
}

// 加载更多商品
const loadMoreGoods = () => {
  page.value += 1
  fetchGoodsList()
}

// 切换子分类
const handleSubCategoryChange = (tab) => {
  goodsList.value = []
  page.value = 1
  finished.value = false
  activeSubCategory.value = tab.name

  // 更新路由参数
  router.replace({ query: { id: tab.name } })
  fetchGoodsList()
}

// 跳转商品详情
const goToGoodsDetail = (id) => {
  router.push({ path: '/goods/detail', query: { id } })
}

// 初始化
onMounted(() => {
  fetchCategoryData(activeSubCategory.value)
})
</script>

<style scoped>
.goods-list-container {
  padding-bottom: 50px;
  background-color: #f7f7f7;
  min-width: 78vh;
}

.subcategory-nav {
  position: sticky;
  top: 0;
  z-index: 99;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.current-category {
  position: relative;
  margin-bottom: 10px;
}

.category-banner {
  width: 100%;
  height: 300px;
  object-fit: contain;
}

.category-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  color: white;
}

.category-info h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 500;
}

.category-info p {
  margin: 0;
  font-size: 13px;
  opacity: 0.9;
}

.goods-list {
  padding: 10px;
}

.goods-item {
  display: flex;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.goods-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.goods-info {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-price {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.retail-price {
  font-size: 16px;
  color: #ee0a24;
  font-weight: bold;
  margin-right: 8px;
}

.counter-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.goods-brief {
  font-size: 12px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-item {
  display: flex;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.goods-item:hover {
  transform: translateY(-3px) scale(1.01); 
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
}

.goods-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  transition: transform 0.3s ease; 
}

.goods-item:hover .goods-image {
  transform: scale(1.05); 
}

.retail-price {
  font-size: 16px;
  color: #ee0a24;
  font-weight: bold;
  margin-right: 8px;
  transition: color 0.3s ease;
}

.goods-item:hover .retail-price {
  color: #ff2d51; 
}
</style>